<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvescode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.shelvescode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.quality.qccode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.qccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordernumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.suppliercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.erpordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.erpordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.state')">
            <el-select v-model="formInline.state" :placeholder="$t('m.choose')">
              <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      class="table-wrap single-select-table"
      v-loading="tableLoading"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
    >
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="shelvescode" :label="$t('m.shelves.shelvescode')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-shelvesCode')">
            <el-button type="text" @click="getShelvesData(scope.row.shelvesid)">{{scope.row.shelvescode}}</el-button>
          </template>
          <template v-else>{{scope.row.shelvescode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="ordernumber" :label="$t('m.in.ordernumber')"></el-table-column>
      <el-table-column align="center" prop="erpordercode" :label="$t('m.in.erpordercode')"></el-table-column>
      <el-table-column align="center" prop="qccode" :label="$t('m.quality.qccode')"></el-table-column>
      <!-- <el-table-column align="center" prop="typeid" :label="$t('m.shelves.shelvestype')">
        <template slot-scope="scope">{{scope.row.typeid|typeFilter(lan)}}</template>
      </el-table-column>-->
      <el-table-column align="center" prop="shelvestype" :label="$t('m.shelves.shelvestype')"></el-table-column>
      <el-table-column align="center" prop="state" :label="$t('m.state')"></el-table-column>
      <el-table-column align="center" prop="creator" :label="$t('m.creator')"></el-table-column>
      <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChange" @size-change="handleSizeChange"></el-pagination>
    <!-- table数据展示 end -->

    <!-- 上架单dialog start -->
    <shelvescodePopup :popupVisible="shelvescodePopupVisible" :detail="popupData" @close="shelvescodePopupVisible=false"></shelvescodePopup>
    <!-- 上架单dialog end -->
  </div>
</template>
<script>
import common from '@/utils/common'
import shelvescodePopup from '@/components/onShelves/shelvescode-popup'
export default {
  name:'onShelves',
  data(){
    return {
      formInline:{
        // shelvescode:'', // 上架单
        // qccode:'', // 质检单
        // ordernumber:'', // 订单号
        // productspeccode:'', //sku
        // suppliercode:'', //suppliercode
        // shelvesid:'' // 上架id
      },
      tableData:[],

      shelvescodePopupVisible:false, // 控制上架单dialog显示隐藏
      popupData:''
    }
  },
  mounted(){
    this.getData()
  },
  components:{ shelvescodePopup },
  computed:{
    // 0 待上架 1 部分上架 2 已完成 3 已取消
    stateOptions(){
      return [
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.shelves.state1'), value:0 },
        { label:this.$t('m.shelves.state4'), value:1 },
        { label:this.$t('m.shelves.state5'), value:2 },
        { label:this.$t('m.shelves.state3'), value:3 }
      ]
    }
  },
  filters:{
    typeFilter(value, lan){
      return [lan('m.shelves.type1'), lan('m.shelves.type2')][value - 1]
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let options = {
        method:'get',
        url:'/shelves/page',
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.page = data.current
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
        if (!data.records.length)
          return this.callbackMessage(this.$t('m.nodata'))
        this.tableData = this.tableData.map(item => {
          item.createdate = common.timestampToTime(item.createdate)
          return item
        })
      })
    },
    // 根据shelvesid查询
    getShelvesData(id){
      this.$axios({
        method:'get',
        url:`shelves/query/${id}`
      }).then(({ data }) => {
        this.popupData = data
        this.shelvescodePopupVisible = true
      })
    }
  },
  beforeRouteLeave(to, form, next){
    this.shelvescodePopupVisible = false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>